<template>
	<el-dialog
		:title="cuFromTitle"
		v-model="cuVisible"
		width="1100px"
		:zIndex="999"
		top="0"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	>
		<form-component
			ref="formComponent"
			:goodsId="goodsId"
			:baseUrl="baseUrl"
			@success="formSuccess"
			@fail="formFail"
		/>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="hideForm" :loading="btnLoad" size="mini">取消</el-button>
				<el-button type="primary" :loading="btnLoad" size="mini" @click="cuFormSubmit"
				>修改</el-button
				>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import FormComponent from "./form.vue";

export default {
	name: "shop-goods-form",
	components: {
		FormComponent
	},
	props: {
		baseUrl: { type: String, default: "" }
	},
	emits: ["success"],
	data() {
		return {
			// 如果为0时为添加
			goodsId: 0,
			btnLoad: false,
			cuVisible: false
		};
	},
	computed: {
		cuFromTitle() {
			if (this.goodsId < 1) {
				return "添加商品";
			} else {
				return "编辑商品";
			}
		}
	},
	methods: {
		hideForm() {
			this.cuVisible = false;
		},
		show(_goodsId) {
			this.goodsId = _goodsId;
			this.cuVisible = true;
		},
		cuFormSubmit() {
			this.btnLoad = true;
			this.$refs["formComponent"].onSubmit();
			setTimeout(() => {
				this.btnLoad = false;
			}, 10000);
		},
		formSuccess() {
			this.btnLoad = false;
			this.cuVisible = false;
			this.$emit("success");
		},
		formFail() {
			this.btnLoad = false;
		}
	}
};
</script>

<style scoped></style>
